<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<!DOCTYPE html>
<head>

<%--
<link rel="stylesheet" href="resources/css/xcharts.css" type="text/css">
<link rel="stylesheet" href="resources/css/xcharts.min.css" type="text/css">

<script src="<c:url value="/resources/js/xcharts.js" />"></script>
<script src="<c:url value="/resources/js/xcharts.min.js" />"></script>
--%>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
	
setInterval(function() {
		test();
	
},10 * 1000); // 60 * 1000	: 60 sec.

function test() {
	$.ajax({
		type:"POST",
		url:"/am/rscCollect",
		data:$('#rscAjax').serialize(),
		dataType:"json",
		success: function(data) {
			var collectionTime = data.rscCollectAlarm.collectionTime;
			// console.log("collectionTime: "+collectionTime);
			var alarmCpu = data.rscCollectAlarm.alarmCpu;
			var alarmMem = data.rscCollectAlarm.alarmMem;
			var alarmHdd = data.rscCollectAlarm.alarmHdd;
			var cpuRate = data.rscCollectAlarm.cpuRate;
			var memRate = data.rscCollectAlarm.memRate;
			var hddRate = data.rscCollectAlarm.hddRate;
			
			
			// 표시할 문자열을 담을 변수.
			var cpuStr = "";
			var memStr = "";
			var hddStr = "";

			// chart(data.rscCollectSvrDtoList);
			
			if(alarmCpu == "CRITICAL"){
				cpuStr += "<div style=\"color: black; font-family: fantasy; font-size: 40px; background-color: red; width: 160px; height: 120px; text-align: center; display:table-cell; vertical-align: middle;\">CPU<br>"+cpuRate.toFixed(2)+"%</div><br>";
			}else if(alarmCpu == "MAJOR"){
				cpuStr += "<div style=\"color: black; font-family: fantasy; font-size: 40px; background-color: orange; width: 160px; height: 120px; text-align: center; display:table-cell; vertical-align: middle;\">CPU<br>"+cpuRate.toFixed(2)+"%</div><br>";
			}else if(alarmCpu == "MINOR"){
				cpuStr += "<div style=\"color: black; font-family: fantasy; font-size: 40px; background-color: yellow; width: 160px; height: 120px; text-align: center; display:table-cell; vertical-align: middle;\">CPU<br>"+cpuRate.toFixed(2)+"%</div><br>";
			}else{
				cpuStr += "<div style=\"color: black; font-family: fantasy; font-size: 40px; background-color: #99cc00; width: 160px; height: 120px; text-align: center; display:table-cell; vertical-align: middle;\">CPU<br>"+cpuRate.toFixed(2)+"%</div><br>";
			}
			
			
			if(alarmMem == "CRITICAL"){
				memStr += "<div style=\"color: black; font-family: fantasy; font-size: 40px; background-color: red; width: 160px; height: 120px; text-align: center; display:table-cell; vertical-align: middle;\">MEM<br>"+memRate.toFixed(2)+"%</div><br>";
			}else if(alarmMem == "MAJOR"){
				memStr += "<div style=\"color: black; font-family: fantasy; font-size: 40px; background-color: orange; width: 160px; height: 120px; text-align: center; display:table-cell; vertical-align: middle;\">MEM<br>"+memRate.toFixed(2)+"%</div><br>";
			}else if(alarmMem == "MINOR"){
				memStr += "<div style=\"color: black; font-family: fantasy; font-size: 40px; background-color: yellow; width: 160px; height: 120px; text-align: center; display:table-cell; vertical-align: middle;\">MEM<br>"+memRate.toFixed(2)+"%</div><br>";
			}else{
				memStr += "<div style=\"color: black; font-family: fantasy; font-size: 40px; background-color: #99cc00; width: 160px; height: 120px; text-align: center; display:table-cell; vertical-align: middle;\">MEM<br>"+memRate.toFixed(2)+"%</div><br>";
			}
			
			
			if(alarmHdd == "CRITICAL"){
				hddStr += "<div style=\"color: black; font-family: fantasy; font-size: 40px; background-color: red; width: 160px; height: 120px; text-align: center; display:table-cell; vertical-align: middle;\">HDD<br>"+hddRate.toFixed(2)+"%</div><br>";
			}else if(alarmHdd == "MAJOR"){
				hddStr += "<div style=\"color: black; font-family: fantasy; font-size: 40px; background-color: orange; width: 160px; height: 120px; text-align: center; display:table-cell; vertical-align: middle;\">HDD<br>"+hddRate.toFixed(2)+"%</div><br>";
			}else if(alarmHdd == "MINOR"){
				hddStr += "<div style=\"color: black; font-family: fantasy; font-size: 40px; background-color: yellow; width: 160px; height: 120px; text-align: center; display:table-cell; vertical-align: middle;\">HDD<br>"+hddRate.toFixed(2)+"%</div><br>";
			}else{
				hddStr += "<div style=\"color: black; font-family: fantasy; font-size: 40px; background-color: #99cc00; width: 160px; height: 120px; text-align: center; display:table-cell; vertical-align: middle;\">HDD<br>"+hddRate.toFixed(2)+"%</div><br>";
			}
			
			$('#alarmInfo').text("");
			$('#alarmInfo').append(cpuStr);
			$('#alarmInfo').append(memStr);
			$('#alarmInfo').append(hddStr);
			
			<%--
			$('#rscCollect').text("");
			$('#rscCollect').append("<h1>수집시간: "+collectionTime.substring(0,4)+"년 "+collectionTime.substring(4,6)+"월 "+collectionTime.substring(6,8)+"일 "+
					collectionTime.substring(8,10)+"시 "+collectionTime.substring(10,12)+"분</h1>");
			--%>
			var timeStr = "";
			timeStr += "<h1>수집시간: "+collectionTime.substring(0,4)+"년 "+collectionTime.substring(4,6)+"월 "+collectionTime.substring(6,8)+"일 "+
			collectionTime.substring(8,10)+"시 "+collectionTime.substring(10,12)+"분</h1>";
				
			var collectArray = [];
			var cpuArray = [];
			var memArray = [];
			var hddArray = [];

			// 각각의 결과를 script 버전의 ArrayList로 뽑아내야 하나?
			$.each(data["rscCollectSvrDtoList"], function(index, value) {
				// $('#rscCollect').text(index +", "+value.collectionTime);
				<%--
				$('#rscCollect').append(index+" | "+value.collectionTime+" | "+value.svrNum+" | "+value.cpuRate+" | "+value.memRate+
						" | "+value.hddRate+" | "+value.alarmCpu+" | "+value.alarmMem+" | "+value.alarmHdd+"<br>");
				--%>
				collectArray.push(value.collectionTime);
				cpuArray.push(value.cpuRate);
				memArray.push(value.memRate);
				hddArray.push(value.hddRate);
      		});
			
		    $('#rscCollect').highcharts({
		        title: {
		            text: 'CPU, MEM, HDD 점유율',
		            x: -20 //center
		        },
		        subtitle: {
		            // text: 'Subtitle',
		            text: timeStr,
		            x: -20
		        },
		        xAxis: {
		            // categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
		            //     'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
		        	categories: collectArray
		        },
		        yAxis: {
		            title: {
		                text: '점유율 (%)'
		            },
		            plotLines: [{
		                value: 0,
		                width: 1,
		                color: '#808080'
		            }]
		        },
		        tooltip: {
		            valueSuffix: '%'
		        },
		        legend: {
		            layout: 'vertical',
		            align: 'right',
		            verticalAlign: 'middle',
		            borderWidth: 0
		        },
		        series: [{
		            name: 'CPU',
		            // data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
		        	data: cpuArray
		        }, {
		            name: 'MEM', 
		            // data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
		        	data: memArray
		        }, {
		            name: 'HDD',
		            // data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
		        	data: hddArray
		        }]
		    });
			
			
			}
		});	
};


</script> 
 
</head>
<body>

<div id="tip">
<h1 style="float: left">서버 기본 정보 및 감시 정보&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h1>
<h1 style="float: left">◈ 알람 정보&nbsp;&nbsp;&nbsp;&nbsp;</h1>
<div style="margin-right: 5%; margin-top: 15px; background-color: red; width: 80px; height: 30px; float: left; color: black; font-family: fantasy; font-size: 20px; text-align: center; display: table-cell; vertical-align: middle;">Critical</div>
<div style="margin-right: 5%; margin-top: 15px; background-color: orange; width: 80px; height: 30px; float: left; color: black; font-family: fantasy; font-size: 20px; text-align: center; display: table-cell; vertical-align: middle;">Major</div>
<div style="margin-right: 5%; margin-top: 15px; background-color: yellow; width: 80px; height: 30px; float: left; color: black; font-family: fantasy; font-size: 20px; text-align: center; display: table-cell; vertical-align: middle;">Minor</div>
<div style="margin-top: 15px; background-color: #99cc00; width: 80px; height: 30px; float: left; color: black; font-family: fantasy; font-size: 20px; text-align: center; display: table-cell; vertical-align: middle;">Normal</div>
<br>
<br>
<br>
<br>
</div>
<hr align="left">	
<%-- <form id="submit" action="/am/submit" method="post"> --%>
<form id="rscAjax">
<c:forEach var="row" items="${amList }">
	<div class="table" style="float: left; width: 250px; height: 400px">
		<table id="svrInfo" style="height:10%; width:120%; margin-left: 10px" border="1">
		<input type="hidden" style="height: 20px;" name="svrNum" maxlength="20" value="${row.svrNum }">
			<tr>
				<th style="width: 5%">Server 번호</th>
				<td style="width: 10%">Server ${row.svrNum }</td>
			</tr>
			<tr>		
				<th>HOST</th>
				<td>${row.host }</td>
			</tr>
			<%--
			<tr>		
				<th>svrId</th>	
				<td>${row.svrId }</td>
			</tr>
			
			<tr>		
				<th>svrPw</th>	
				<td>${row.svrPw }</td>
			</tr>
			<tr>
				<th>portNum</th>
				<td>${row.portNum }</td>
			</tr>
			--%>
			<tr>
				<th>Serial_No</th>
				<td>${row.serialNo }</td>
			</tr>
			<tr>
				<th>등록자 ID</th>
				<td>${row.usrId }</td>
			</tr>
			<%--
			<tr>
				<th>ip</th>
				<td>${row.ip }</td>
			</tr>
			--%>
			<tr>
				<th>건물명</th>
				<td>${row.building }</td>
			</tr>
			<tr>
				<th>층번호</th>
				<td>${row.floor }</td>
			</tr>
			<tr>
				<th>랙번호</th>
				<td>${row.rack }</td>
			</tr>
			<tr>
				<th>종류</th>
				<td>${row.type }</td>
			</tr>
			<tr>
				<th>모델명</th>
				<td>${row.modelName }</td>
			</tr>
			<tr>
				<th>CPU 수</th>
				<td>${row.cpuNum }</td>
			</tr>
			<tr>
				<th>Total MEM(GB)</th>
				<td>${row.totalMemory }</td>
			</tr>
			<tr>
				<th>DISK 수</th>
				<td>${row.diskNum }</td>
			</tr>
			<tr>
				<th>표시 여부</th>
				<td>${row.visible }</td>
			</tr>
		</table>
		<br>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<a href="/am/svrModify?svrNum=${row.svrNum}&serialNo=${row.serialNo}"><input type="button" style="width: 100px; height: 25px" value="서버 정보 수정"/></a><br>
	</div>

	<div id="alarmInfo" align="right" style="float: left; width: 20%; height: 400px">
	<%--
		<div style="color: black; font-family: fantasy; font-size: 40px; background-color: red; width: 120px; height: 120px; text-align: center; display:table-cell; vertical-align: middle;">CPU<br>90%</div><br>
		<div style="color: black; font-family: fantasy; font-size: 40px; background-color: yellow; width: 120px; height: 120px; text-align: center; display:table-cell; vertical-align: middle;">MEM<br>60%</div><br>
		<div style="color: black; font-family: fantasy; font-size: 40px; background-color: green; width: 120px; height: 120px; text-align: center; display:table-cell; vertical-align: middle;">HDD<br>50%</div><br>
	--%>
	</div>

	<div id="rscCollect" style="float: left; width: 60%; height: 400px; position: relative">
	<%--			
	${status.count }<br>
	${row.collectionTime } | ${row.svrNum } | ${row.cpuRate } | ${row.memRate } | ${row.hddRate } | ${row.alarmCpu } | ${row.alarmMem } | ${row.alarmHdd }<br><br>
	--%>
	</div>

</c:forEach>
</form>	

</body>
</html>